<!-- eslint-disable vue/multi-word-component-names -->
<template>
<div>
  <div class="main">
      <van-icon name="arrow-left" class="van-icon"/>
      <div class="content">
        <span class="ctt-text">
            上海
        </span>
        <van-search
        v-model="value"
        placeholder="请输入小区或地址"
        class="ctt-search"
        />
      </div>
      <van-icon name="user-o" class="van-icon"/>
  </div>
  <div class="nav-title">
      <van-sticky>
        <van-tabs
          v-model="active"
          title-active-color="#56b97f"
          title-inactive-color="#000"
          line-width="0"
          line-height="0"
          router
        >
        <van-tab title="区域"></van-tab>
        <van-tab title="方式"></van-tab>
        <van-tab title="租金"></van-tab>
        <van-tab title="筛选"></van-tab>
      </van-tabs>
      </van-sticky>
  </div>
  <HouseList
  v-for="(item,index) in houseList"
   :key="index"
   :obj="item"
   ></HouseList>
</div>
</template>

<script>
import HouseList from '@/views/Search/component/HouseList'
import { houseAPI } from '@/api'
export default {
  data () {
    return {
      value: '',
      houseList: [],
      active: 0
    }
  },
  methods: {
  },
  async created () {
    const res = await houseAPI()
    this.houseList = res.data.body.list
  },
  components: {
    HouseList
  }
}
</script>

<style lang="less" scoped>
  .main{
    display: flex;
    background-color: #56b97f;
    height: 50px;
    font-size: 18px;
    color: #fff;
  }
  .van-icon{
    width: 50px;
    text-align: center;
    line-height: 50px;
  }

  .content{
    display: flex;
    flex: 1;
    background-color: #56b97f;
    line-height: 50px;
    font-size: 14px;
  }
  /deep/ .van-search__content{
    background-color: #fff;
  }
  .nav-title{
    display: flex;
    height: 40px;
    overflow: hidden;
  }
  .nav-title-item{
    flex: 1;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    position: relative;
  }
  .nav-title-item::before{
    content: '';
    display: block;
    position: absolute;
    right: 15px;
    top: 15px;
    width: 10px;
    height: 10px;
    background-color: #000;
  }
  /deep/ .van-tabs__nav {
    width: 375px;
    display: flex;
    border-bottom: 1px solid #000;
  }
  /deep/ .van-tab{
      flex: 1;
      border-bottom: 1px solid #ccc;
      height: 40px;
      position: relative;
  }
  /deep/ .van-tab::before{
    content: '';
    display: block;
    border-right: 3px solid #ccc;
    border-bottom: 3px solid #ccc;
    border-top: 3px solid transparent;
    border-left: 3px solid transparent;
    transform: rotate(45deg);
    position: absolute;
    right: 20px;
    bottom: 18px;
  }
  /deep/ .van-tabs__wrap{
    height: 40px;
  }
  .van-search{
    height: 34px;
    width: 100%;
    margin-top: 8px;
    background-color: #fff;
    border-radius:0 3px 3px 0 ;
    color: #ccc;
  }
  .van-search::before{
    content: '';
    display: block;
    width: 1px;
    height: 16px;
   background-color: #ccc;
  }
  .ctt-text{
    display: block;
    width: 50px;
    background-color: #fff;
    box-sizing: border-box;
    height: 34px;
    margin-top: 8px;
    line-height: 34px;
    border-radius:3px 0 0 3px;
    padding-left: 5px;
    color: #000;
    position: relative;
  }
  .ctt-text::before{
    content: '';
    display: block;
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;
    border-top: 3px solid transparent;
    border-left: 3px solid transparent;
    transform: rotate(45deg);
    position: absolute;
    bottom: 16px;
    right: -2px;
  }
</style>
